// 导入 gulp 相关依赖包
const gulp = require('gulp');

// 导入 css 相关依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

// 导入 js 相关依赖包
// 下载了 4个 依赖包 gulp-babel  @babel/core  @babel/preset-env  gulp-uglify
// 只需要 导入 gulp-babel 和 gulp-uglify
// gulp-babel 执行时 自动导入加载 @babel/core  @babel/preset-env
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// 导入 html 相关依赖包
const htmlmin = require('gulp-htmlmin');

// 导入 sass 相关依赖包
const sass = require('gulp-sass');

// 导入 服务器 相关依赖包
const webserver = require('gulp-webserver');

// 导入 删除 相关依赖包
const del = require('del');

// 2 设定 gulp 相关配置程序

// 2-1 css打包压缩程序
const cssHandler = function(){
    return gulp.src('./src/css/*.css')          // 按照路径读取 src>css 文件夹中 所有扩展名是 .css的文件
           .pipe( autoprefixer() )              // 针对 gulp.src() 读取导入的文件内容 自动添加前缀
           .pipe( cssmin() )                    // 针对 gulp.src() 读取导入的文件内容 添加前缀之后 压缩文件内容
           .pipe( gulp.dest('./dist/css') );    // 针对 gulp.src() 读取导入的文件内容 执行操作之后 存储到 dist>css 文件夹中 
}

// 2-2 sass打包压缩规范
const sassHandler = function(){
        return gulp.src('./src/sass/*.scss') 
           .pipe( sass() )                      // 将导入的sass文件内容编译为css文件
           .pipe( autoprefixer() )              
           .pipe( cssmin() )                    
           .pipe( gulp.dest('./dist/css') );
}


// 2-3 js打包压缩程序
const jsHandler = function(){
    return gulp.src('./src/js/*.js')
           .pipe( babel( { presets : [ '@babel/env' ] } ) )     // babel() 必须按照规定设定参数
           .pipe( uglify() )
           .pipe( gulp.dest('./dist/js') );
}

// 2-4 html打包压缩程序
const htmlHandler = function(){
    return gulp.src('./src/pages/*.html')
           .pipe( htmlmin({         // html打包规范必须以对象的形式设定对应的打包压缩规范配置 根据实际项目需求配置
                removeAttributeQuotes : true ,              // 删除属性中的双引号
                removeComments : true ,                     // 删除注释
                // removeEmptyElements : true ,             // 删除空标签
                // removeEmptyAttributes : true ,           // 删除空属性
                removeScriptTypeAttributes : true ,         // 删除 script标签 type 属性
                removeStyleLinkTypeAttributes : true ,      // 删除 style标签 link标签 type属性
                collapseBooleanAttributes : true ,          // 删除布尔属性的属性值
                collapseWhitespace : true ,                 // 删除标签之间的空格
                minifyCSS : true ,                          // 压缩内部式css程序
                minifyJS : true ,                           // 压缩内部式js程序 
           }))
           .pipe( gulp.dest('./dist/pages') )
}

// 2-5 img打包规范 不压缩 直接存储
const imgHandler = function(){
    return gulp.src('./src/message/*.*')
           .pipe( gulp.dest('./dist/message') )
}

// 2-6 后端程序打包规范 不压缩 直接存储
const PHPHandler = function(){
    return gulp.src('./src/server/*.php')
           .pipe( gulp.dest('./dist/server') )
}

// 2-7 已经压缩的文件 不压缩 直接存储
const toolsHandler = function(){
    return gulp.src('./src/tools/**')
           .pipe( gulp.dest('./dist/tools') )
}


// 3 设定 删除规范
const delHandler = function(){
    return del( [ './dist' ] );     // 删除 dist 文件夹
}


// 4 设定 监听程序 
const watchHandler = function(){
    gulp.watch( './src/css/*.css' , cssHandler );   // 监听的src>css文件夹中所有的扩展名是css的文件 文件内容有改变 执行 设定的 css打包压缩规范
    gulp.watch( './src/sass/*.scss' , sassHandler );
    gulp.watch( './src/js/*.js' , jsHandler );
    gulp.watch( './src/pages/*.html' , htmlHandler );
    gulp.watch( './src/message/*.*' , imgHandler );
    gulp.watch( './src/server/*.php' , PHPHandler );
    gulp.watch( './src/tools/**' , toolsHandler );
}

// 5 设定 gulp服务器规范 主要是为了看 热启动
// gulp服务器 我们没有做完整的配置 不能 执行PHP等程序 
const webserverHandler = function(){
    return gulp.src( './dist' )                 // 导入使用的是dist文件夹中 压缩的文件
           .pipe( webserver({                   // 以对象的形式设定参数
                host: '127.0.0.1',              // 设定服务器地址 当前是本地服务器 也就是 127.0.0.1 或者 localhost
                port: '8088' ,                  // 设定监听端口 只要是 有人其他程序使用的端口都可以 范围 是 0 - 65535
                open: './pages/index.html',     // 设定默认打开文件的路径 是从 dist文件夹开始的相对路径
                livereload : true ,             // 开启热启动 页面内容有改变 自动刷新
            }))
}


// 6 设定 gulp 默认执行程序
// 之后执行gulp都是 执行运行 gulp 命令
module.exports.default = gulp.series(
    // 先 删除 原始文件夹 也就是先执行删除规范
    delHandler ,

    // 再 执行 打包规范 将 对应的文件先打包压缩一次
    gulp.parallel( cssHandler , sassHandler , jsHandler , htmlHandler , imgHandler , PHPHandler , toolsHandler),

    // 执行 服务器程序
    // webserverHandler ,

    // 最后执行 监听规范 如果 监听文件内容改变 自动执行指定的打包压缩规范
    watchHandler,
)





